<template>
  <div>
    <!-- 按钮组/搜索框 -->
    <zx-btn-group>
      <zx-btn @click="$router.push('/noticeform')" size="is-small" :round="true" type="success">新增</zx-btn>
      <zx-btn
        @click="$router.push({name:'noticeform',query:selData[0]})"
        size="is-small"
        :round="true"
        type="warning"
        :disabled="selData.length!==1"
      >修改</zx-btn>
      <zx-btn :disabled="delId==''" @click="dels" size="is-small" :round="true" type="danger">批量删除</zx-btn>
    </zx-btn-group>
    <div class="field has-addons" style="position:absolute;top:24px;right:24px;">
      <div class="control">
        <input v-model="getdata.search" class="input is-rounded" type="text" placeholder="按照商品名查询" />
      </div>
      <div class="control">
        <zx-btn @click="getData" :round="true" type="info">搜索</zx-btn>
      </div>
    </div>
    <!-- 表格 -->
    <zx-table :columns="tableRow" :data="list" @selectChange="selectChange" />

    <!-- 分页 API:当前页/每页显示几条/总条数/翻页事件 -->
      <!-- :total="noticeTotal" -->
    <zx-page
      :curP="getdata.curP"
      :pageSize="getdata.pageSize"
      :pageSizeArr="pageSizeArr"
      :total="total"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>

<script>
import ZxBtn from "../uiComps/ZxBtn.vue";
import ZxBtnGroup from "../uiComps/ZxBtnGroup.vue";
import ZxTable from "../uiComps/ZxTable.vue";
import Page from "../uiComps/Page.vue";
import { createNamespacedHelpers } from "vuex";
let {mapState, mapActions,mapMutations,mapGetters} = createNamespacedHelpers('notice')
export default {
  data() {
    return {
      tableRow: [
        { type: "selection", align: "center" },
        { title: "序号", type: "index", align: "center" },
        { title: "标题", key: "title", sort: "sort" },
        { title: "内容", key: "content" },
        { title: "时间", key: "time" }
      ],
      selData: [],
      getdata: {
        search: "",
        curP: 1,
        pageSize: 5
      },
      pageSizeArr: [1, 2, 3, 5],
      total:0
    };
  },
  computed: {
    ...mapState(["list"]),
    delId() {
      let ids = [];
      this.selData.forEach(item => {
        ids.push(item.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    ...mapActions(["get", "del"]),
    selectChange(arr) {
      this.selData = [...arr];
    },
    getData() {
      this.$loading.show();
      this.get(this.getdata).then(res => {
        this.total = res.data._results;
        this.$loading.hide();
      });
    },
    dels() {
      if (confirm("确定要删除吗")) {
        this.$loading.show();
        this.del(this.delId).then(res => {
          this.$loading.hide();
        });
      }
    },
    pageChange(p) {
      this.getdata.curP = p;
      this.getData();
    },
    pageSizeChange(curSize) {
      this.getdata.pageSize = curSize;
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    "zx-table": ZxTable,
    "zx-page": Page,
    ZxBtn,
    ZxBtnGroup
  }
};
</script>

<style>
</style>
